.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.drop-enter-from,
.drop-leave-to {
  opacity: 0;
  transform: scaleY(0.8);
}

.drop-enter-active,
.drop-leave-active {
  transform-origin: top left;
  transition: all 0.25s ease-in-out;
}

.elastic-enter-active,
.elastic-leave-active {
  transition: transform 0.25s ease-in-out;
}

.elastic-enter-from,
.elastic-leave-to {
  opacity: 0;
  transform: scale(1.01);
}

.left-enter-active,
.left-leave-active,
.right-enter-active,
.right-leave-active,
.top-enter-active,
.top-leave-active,
.bottom-enter-active,
.bottom-leave-active {
  transition: transform 0.25s ease;
}

.left-enter-from,
.left-leave-to {
  transform: translate3d(-100%, 0, 0);
}

.right-enter-from,
.right-leave-to {
  transform: translate3d(100%, 0, 0);
}

.top-enter-from,
.top-leave-to {
  transform: translate3d(0, -100%, 0);
}

.bottom-enter-from,
.bottom-leave-to {
  transform: translate3d(0, 100%, 0);
}

.scale-enter-active,
.scale-leave-active {
  transition: all 0.25s ease-in-out;
}

.scale-enter-from,
.scale-leave-to {
  opacity: 0;
  transform: scale3d(0.4, 0.4, 1);
}

.scale-enter-move,
.scale-leave-move {
  transition: all 0.25s;
}

.scale-leave-active {
  position: absolute;
}

// .nav-goto-enter-active,
// .nav-goto-leave-active,
// .nav-back-enter-active,
// .nav-back-leave-active {
//   transition: transform 0.4s ease-in-out;
// }

// .nav-goto-enter-from,
// .nav-back-leave-to {
//   transform: translate3d(100%, 0, 0);
// }

// .nav-back-enter-from,
// .nav-goto-leave-to {
//   transform: translate3d(-30%, 0, 0);
// }

.tg-left-enter-active,
.tg-right-enter-active,
.tg-top-enter-active,
.tg-bottom-enter-active {
  z-index: 0 !important; // 过渡期间
}
.tg-left-leave-active,
.tg-right-leave-active,
.tg-top-leave-active,
.tg-bottom-leave-active {
  position: absolute !important; // 通过将 position 属性设置为 absolute， 可使元素脱离文档流
}

// .tg-top-move,
// .tg-bottom-move,
// .tg-left-move,
// .tg-right-move {
// }

.tg-left-enter-from {
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
}

.tg-left-leave-to {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}

.tg-right-enter-from {
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
}
.tg-right-leave-to {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}

.tg-top-enter-from,
.tg-top-leave-to {
  opacity: 0;
  transform: translate3d(0, -50%, 0);
}

.tg-bottom-enter-from,
.tg-bottom-leave-to {
  opacity: 0;
  transform: translate3d(0, 50%, 0);
}
